<template>
  <!-- <div>{{ parent_list }}</div> -->
  <!-- <dv-border-box12 class="SceneryPoint_box2"> -->
  <div class="SceneryPoint_box2">
    <div class="title">公共设施
      <div small-bg>
    <dv-decoration5 :dur="2" style="width:200px;height:20px;" />
  </div>
    </div>

    <div class="SceneryPoint_box">
      <div v-for="item in icon_data" :key="item" class="icon_box">
        <div v-if="item.info" class="active">
          <el-popover :width="300">
            <template #reference>
              <div class="icon_box_item">
                <svg-icon :name="item.name" :color="atiive_color" />
                <h3>{{ item.name }}</h3>
              </div>
            </template>
            <template #default>
              <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
              >
                <svg-icon :name="item.name" :color="atiive_color" />
                <h2>{{ item.name }}</h2>
            

                <p class="demo-rich-content__desc" style="margin: 0">{{ item.info }}</p>
              </div>
            </template>
          </el-popover>
        </div>
        <div v-else>
          <div class="icon_box_item">
            <svg-icon :name="item.name" :color="atiive_color" />
            <h4>{{ item.name }}</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </dv-border-box12> -->
</template>

<script setup lang="ts">
import {
  getService,
} from "@/request/analysis";
var icon_data = ref([
  { name: "卫生间" },
  { name: "餐饮" },
  { name: "便利店" },
  { name: "手机充电" },
  { name: "景区地图" },
  { name: "纪念品商店" },
  { name: "讲解器租赁" },
  { name: "雨具租赁" },
  { name: "母婴室" },
  { name: "自动售卖机" },
  { name: "童车租赁" },
  { name: "残疾通道" },
  { name: "轮椅租赁" },
  { name: "WIFI" },
  { name: "停车场" },
  { name: "吸烟区" },
  { name: "园内交通" }
]);
var atiive_color = "yellow";
onMounted(() => {
  //   console.log("==", parent_list);
});
const props = defineProps<{
  city_id_list: String;
  // icon_data: Array<any>;
}>();
const get_data = async (item: any) => {
  console.log("==========",item);
  icon_data.value = [
  { name: "卫生间" },
  { name: "餐饮" },
  { name: "便利店" },
  { name: "手机充电" },
  { name: "景区地图" },
  { name: "纪念品商店" },
  { name: "讲解器租赁" },
  { name: "雨具租赁" },
  { name: "母婴室" },
  { name: "自动售卖机" },
  { name: "童车租赁" },
  { name: "残疾通道" },
  { name: "轮椅租赁" },
  { name: "WIFI" },
  { name: "停车场" },
  { name: "吸烟区" },
  { name: "园内交通" }
]
  
  await getService({
    // list_id: 114
    list_id: item
  }).then(({ data }) => {
    console.log("公共==========6设施",data);
    data.forEach(item1 => {
      icon_data.value.forEach(item2 => {
        if (item1.SERVICE == item2.name) {
          item2.info = item1.SERVICE_DESC + "";
          item2.DIM_SPOT = item1.DIM_SPOT + "";
        }
      });
      // console.log(":icon_data",icon_data);
      
      
    });
  });
};
// const parent: any = ref(props.name);
watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);
      
      get_data(newValue);
    }
  }
);
</script>

<style lang="scss" scoped>
.SceneryPoint_box2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
    // overflow-y: scroll;
    height: 100%;
    margin: 0 auto;
  .title {
    // font-size: 30px;
    margin: 0 auto;
    text-align: center;
    color: rgb(17, 16, 16);
    font-size: 25px;
    font-weight: 900;
    // background-color: chartreuse;
  }

  .SceneryPoint_box {
    // background-color: rgb(80, 95, 90);
    // margin:  0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    // height: 500px;
    // margin-bottom: 20px;
    // padding-bottom: 10px;
    gap: 1px;
    // padding: 5px;
    width: 100%;
    // overflow-y: scroll;
    height: 100%;
    // overflow-y: scroll;
    .icon_box {
      // display: inline;
      background-color: rgba(218, 212, 212, 0.8);
      display: flex;
      flex-direction: column;
      // margin-top: 10px;
      // padding-top: 10px;
      margin-left: 1%;
      color: rgb(5, 5, 5);
      margin-top: 1%;
      border: 1px solid rgb(127, 255, 133);
      // justify-content: center;
      // line-height: 100px;
      width: 15%;
      // background-color: cadetblue;
      height: 20%;
      overflow: hidden;
      .active {
        background-image: linear-gradient(25deg, #496bef, #4c89df, #40a6cf, #12c3be);
        text-align: center;
        justify-content: center;
        color: white;
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
      // padding-bottom: 10px;
      .icon_box_item {
        cursor: pointer;
        // width: 50%;
        //   height: 100px;
        // border: 1px solid red;
        svg {
          font-size: 10px;
        }
        font-size: 7px;
        margin: 10px auto;
        // background-color: #fff;
        text-align: center;
      }
    }
  }
}
</style>